<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            margin:0;
            position:relative;
        }
        #dog {

            position:absolute;
            height: 50px;
            width:50px;
            top:50px;
            left:50px;
            cursor:move;
        }
        #div1 {
            position:absolute;
            height: 50px;
            width: 50px;
            top:100px;
            left:0px;
            background-color: green;
            
        }
        #div2 {
            position:absolute;
            height: 50px;
            width: 50px;
            top:50px;
            left:0px;
            background-color: yellow;
            animation: mymove 5s infinite alternate;
        }
        #div3 {
            position:absolute;
            height: 50px;
            width: 50px;
            top:0px;
            left:0px;
            background-color: red;

            transition:all 100s ;
        }
        #div3:hover {
            transform: rotate(720deg);
        }

        @keyframes mymove{
            0% { left:0px;}
            20% {left:300px;}
            80% {left:400px}
            100% {left:500px}
        }

        #line {
            position: absolute;
            width:200px;
            height: 10px;
            background-color: black;
            /* transform:scaleY(0.5); */
            top:200px;
        }

        #fen {
            border: 100px solid transparent;
            width: 0;
            height: 0;
            border-radius: 100px;

            border-right-color: red;
        }

        #outer {
            width: 200px;
            background-color: red;
            overflow:hidden;
        }

        #inner {
            float:left;
            height: 50px;
            width: 50px;
            background-color: rgb(113, 212, 73);
        }

    </style>
</head>
<body>
    <!-- <img id="dog" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.qqtn.com%2Ffile%2F2013%2F2014-10%2F2014101116404547607.jpg&refer=http%3A%2F%2Fpic.qqtn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636946507&t=775a0c6b9e15c01faa831ac1da81da1c" />

    <div draggable="true" id="div1">1</div>
    <div draggable="true" id="div2">2</div>
    <div draggable="true" id="div3">3</div>

    <div id="line" ></div>

    <div id="fen"></div> -->


    <div id="outer">
        <div id="inner"></div>
    </div>
    <!-- <script>
        
        
        
        
        const rotateEle = function(div3) {

            let num = null;
            div3.onmouseover = function(e) {
                div3.style.transition = 'all 100s';
                let deg = 720;
                let i = 1;
                num = setInterval(function() {
                    i++;
                    deg = deg+ i * 180;

                    div3.style.transform = `rotate(${deg}deg)`;
                },100)
            
            
            }
            div3.onmouseleave = function(){
                clearInterval(num);
                div3.style.transition = 'all 0s';
                div3.style.transform = `rotate(${0}deg)`;
            }
        } 

        const moveEle = function(dog) {

            

            let offsetX = 0;
            let offsetY = 0;

            dog.ondragstart = function(e) {
                console.log('dog 开始移动');
                console.log(offsetX,offsetY);

                offsetX = e.offsetX;
                offsetY = e.offsetY;
            }

            dog.ondrag = function(e) {

                console.log('移动中~');
                let x = e.pageX,
                    y = e.pageY;
                
                if(x === 0 && y === 0) {

                    return ;
                }
                
                x = x - offsetX;
                y = y - offsetY;

                dog.style.left = x + 'px';
                dog.style.top = y + 'px';



            }

            dog.ondragend = function(e) {
                console.log('dog 拖动结束');
                console.log(offsetX,offsetY);
            }
        }

        moveEle(document.querySelector('#dog'));
        moveEle(document.querySelector('#div1'));
        moveEle(document.querySelector('#div2'));
        moveEle(document.querySelector('#div3'));

        rotateEle(document.getElementById('div3'));

    </script> -->
</body>
</html>

